<template>
	<view class="page">
		<view class="search-title">
			<view class="search-title-left" @click="visableChange">
				<view class="search-title-left-item">
					{{dateList}}
				</view>
				<uni-icons type="calendar"  v-show='iconShow' size="36rpx"></uni-icons>
			</view>
			<view class="search-title-right" @click="searchHeadChange">
				<view class="search-title-right-item">
					{{workList}}
				</view>
				<uni-icons type="list"  size="36rpx"></uni-icons>
			</view>
		</view>
		<view class='bg-grey'>
			<view class='time-flex' v-if="visible">
				<view class='time-flex-item' @click="selectTime(0)">
					<view class='time-flex-item-padding'>今天</view>
				</view>
				<view class='time-flex-item' @click="selectTime(1)">
					<view class='time-flex-item-padding'>昨天</view>
				</view>
				<view class='time-flex-item' @click="selectTime(2)">
					<view class='time-flex-item-padding'>本月</view>
				</view>
				<view class='time-flex-item' @click="selectTime(3)">
					<view class='time-flex-item-padding'>上月</view>
				</view>
				<view class='time-flex-item' @click="selectTime(4)">
					<view class='time-flex-item-padding'>全部</view>
				</view>
				<view class='time-flex-item' @click="selectTime(5)">
					<view class='time-flex-item-padding'>选择时间</view>
				</view>
			</view>
			<view class="search-page" v-if="searchHead">
				<view class="form-item u-f u-f-ac">
					<text class="title">生产指令单:</text>
					<input class="card" type="text" v-model="aufnr"/>
				</view>
				<view class="form-item u-f u-f-ac">
					<text class="title">销售订单:</text>
					<input class="card" type="text" v-model="kdauf"/>
				</view>
				<view class="form-item u-f u-f-ac">
					<text class="title">物料:</text>
					<input class="card" type="text" v-model="maktx"/>
				</view>
				<!-- 查询按钮 -->
				<view class="u-f u-f-sbc" style="100%">
					<view class="u-f u-f-jc" style="width: 50%;">
						<button class="btn" @tap.stop="searchQuery">查询</button>
					</view>
					<view class="u-f u-f-jc" style="width: 50%;">
						<button class="btn" @tap.stop="searchReset">重置</button>
					</view>
				</view>
			</view>
			<view class="conf-list">
				<view class="conf-list-item" v-for="(item,index) in listData" :key="index" style="height: 560upx;">
					<view class="conf-list-card">
						<view class="conf-list-title">
							<view>
								<text>生产指令单：</text>
								<text>{{item.aufnr||''}}</text>
							</view>
							<view>
								<text>销售订单：</text>
								<text>{{item.kdauf||''}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>物料编码：</text>
								<text>{{item.matnr||''}}</text>
							</view>
						</view>
						<view class="conf-list-content1" style="margin-bottom: 15upx;">
							<view>
								<text>物料名称：</text>
								<text>{{item.maktx||''}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>尺码：</text>
								<text>{{item.size||''}}</text>
							</view>
							<view>
								<text>数量：</text>
								<text>{{item.menge||''}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>已入库数：</text>
								<text>{{item.hasMenge||''}}</text>
							</view>
							<view>
								<text>未入库数：</text>
								<text>{{item.noMenge||''}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>单价：</text>
								<text>{{item.brtpr||''}}</text>
							</view>
							<view>
								<text>金额：</text>
								<text>{{item.brtwr||''}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>客户：</text>
								<text>{{item.kunnrName||''}}</text>
							</view>
							<view>
								<text>客户单号：</text>
								<text>{{item.bstnk||''}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>订单类型：</text>
								<text>{{item.bsartName||''}}</text>
							</view>
							<view>
								<text>供应商：</text>
								<text>{{item.sort1||''}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>交货日期：</text>
								<text>{{item.eindt||''}}</text>
							</view>
							<view>
								<text>订单日期：</text>
								<text>{{item.bedat||''}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
			:insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate"
			:range="info.range" @confirm="confirm" @close="close" />

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				dateSel:'5',
				selType:'2',
				visible: false,
				searchHead:false,
				dateBegin: '',
				dateEnd: '',
				iconShow: true,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},

				confirmationString: '135/26966',
				dateList: '日期',
				workList: '筛选',
				searchText: '',
				value: 2,
				range: [{
						value: 2,
						text: "工序单"
					},
					{
						value: 1,
						text: "产品"
					},
					{
						value: 3,
						text: "工序"
					},
				],
				text: '暂无数据',
				title: '下拉刷新 + 加载更多',
				data: [],
				listData: [],
				pageNo: 0,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				inputText: "",
				aufnr:'',
				kdauf:'',
				maktx:'',
				beginDate: '',
				endDate: '',
				view: false,
				date: '',
			};
		},

		onShow() {
			this.loadMoreText = "加载更多";
		},
		onLoad(e) {
				this.initData();
		},
		mounted(){
		},
		onUnload() {
			this.max = 0;
			// this.data = [],
			this.listData = [];
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				uni.showToast({
					icon: 'none',
					title: this.loadMoreText
				});
				return;
			}
			setTimeout(() => {
				this.listData = []
				this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			this.pageNo = 0,
			this.selType= 2,
			this.value=2;
			this.dateSel=5,
			this.dateBegin= '',
			this.dateEnd='',
			this.initData();
			uni.stopPullDownRefresh();
		},
		methods: {
			visableChange() {
				this.visible = !this.visible
				this.searchHead = false
			},
			searchHeadChange(){
				this.searchHead = !this.searchHead
				this.visible = false
			},
			choose() {
				this.selFlag = true;
			},
			dialogClose() {
				console.log('点击关闭')
			},
			searchQuery(){
				this.pageNo=0
				this.searchHead = false
				this.initData();
			},
			searchReset(){
				this.aufnr = ''
				this.kdauf = ''
				this.maktx = ''
				this.searchQuery()
			},
			close() {
				console.log('弹窗关闭');
			},
			confirm(e) {
				console.log('confirm 返回:', e.range.after, e.range.before)
				this.iconShow = false
				this.dateList = e.range.before + "~" + e.range.after
				this.dateSel = 6
				this.beginDate = e.range.before
				this.endDate = e.range.after
				this.pageNo = 0;
				this.getList()
			},
			//选择时间
			selectTime(index) {
				this.pageNo = 0;
				this.endFlag = false;
				switch (index) {
					case 0:
						this.dateList = '今天'
						this.dateSel = 1
						this.beginDate = ''
						this.endDate = ''
						this.iconShow = true
						break;
					case 1:
						this.dateList = '昨天'
						this.dateSel = 2
						this.beginDate = ''
						this.endDate = ''
						this.iconShow = true
						break;
					case 2:
						this.dateList = '本月'
						this.dateSel = 3
						this.beginDate = ''
						this.endDate = ''
						this.iconShow = true
						break;
					case 3:
						this.dateList = '上月'
						this.dateSel = 4
						this.beginDate = ''
						this.endDate = ''
						this.iconShow = true
						break;
					case 4:
						this.dateList = '全部'
						this.dateSel = 5
						this.beginDate = ''
						this.endDate = ''
						this.iconShow = true
						break;
					default:
						this.$refs.calendar.open()
						break;
				}
				
				if(index!=5){
					this.getList()
				}
			setTimeout(() => {
				this.visible = !this.visible
			}, 300);
				
			},
			
			scanCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						that.searchText = res.result;
						that.aufnr = res.result;
										that.pageNo = 0;
										that.selType='2';
										that.value=2
						let e = {};
						e.detail = {};
						e.detail.value = res.result;
						that.onInput(e);
					}
				});
			},
			change(e) {
				this.selType = e
				console.log("e:", e);
			},
			
			beginDateChange(e) {
				this.beginDate = e.detail.value
				this.pageNo = 0;
				this.getList()
			},
			endDateChange(e) {
				this.endDate = e.detail.value
				this.pageNo = 0;
				this.getList()
			},
			dropDown() {
				this.view = !this.view
				console.log('this.view===>' + this.view)
			},
			search() {
				this.pageNo = 1;
				this.getList()
				this.view = !this.view
			},
			
			onInput(e) {
				console.log(e.detail.value,'工序单号')
				this.aufnr = e.detail.value
				this.getList()
			},
			onInputAufnr(e) {
				console.log(e.detail.value)
				this.aufnr = e.detail.value
				this.pageNo = 0;
				this.getList()
			},
			onInputMatnr(e) {
				console.log(e.detail.value)
				this.matnr = e.detail.value
				this.pageNo = 0;
				this.getList()
			},
			onInputVornr(e) {
				console.log(e.detail.value)
				this.vornr = e.detail.value
				this.pageNo = 0;
				this.getList()
			},

			initData() {
				setTimeout(() => {
					this.getList();
					uni.stopPullDownRefresh();
				}, 300);
			},
           //产品列表
			getList() {
				this.listData=[]
				let url = '/dcloud/purchaseDocument/purchaseDocument/poList'
				this.pageNo+=1
				this.$http.get(url, {
					params: {
						"pageNo":this.pageNo,
						'aufnr':this.aufnr,
						'kdauf':this.kdauf,
						'maktx':this.maktx,
						"pageSize":100,
						"dateSel": this.dateSel,
						"bedatBegin":this.beginDate,
						"bedatEnd":this.endDate,
					}
				}).then(res => {
					if (res.data.success) {
						const data = res.data.result
						
						this.confirmationString = data.afruCount + '/' + data.afruNum;
						this.listData=res.data.result.records;
						if (this.listData.length <100) {
							this.endFlag = true;
							this.loadMoreText = "已显示全部数据"
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			postSearch(e) {
				this.listData = [];
				this.endFlag = false;
				this.pageNo = 1;
				this.filter = e.detail.value;
				this.loadMoreText = "加载更多",
					this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './scss/Report.scss';
</style>
